<template>
  <div class="lmgList">
    <!-- 顶部 -->
    <van-nav-bar
      title="传智播客.黑马程序员Vue.js"
      style="background-color: #26a2ff; margin-bottom: 5px"
    />

    <!-- 头部 -->
    <div class="header">
      <van-nav-bar
        title="图片展示"
        left-text="返回"
        left-arrow
        @click-left="$router.back()"
      >
        <template #right>
          <van-icon
            name="wap-home-o"
            size="18"
            @click="$router.push({ name: 'Home' })"
          />
        </template>
      </van-nav-bar>
    </div>
    <!-- 导航栏 -->

    <van-tabs v-model="active" animated swipeable sticky>
      <van-tab title="全部">
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div
            class="conent"
            v-for="item in categist"
            :key="item.id"
            @click="lmglo(item.id)"
          >
            <img :src="item.img_url" alt="" />
            <div class="conent_1">
              <p>{{ item.title }}</p>
              <span>{{ item.zhaiyao }}</span>
            </div>
          </div>
        </van-pull-refresh></van-tab
      >
      <van-tab :title="value.title" v-for="value in lmgList" :key="value.id">
        <!-- 显示页面 -->
        <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
          <div
            class="conent"
            v-for="item in cateList"
            :key="item.id"
            @click="lmglolo(item.id)"
          >
            <img :src="item.img_url" alt="" />
            <div class="conent_1">
              <p>
                {{ item.title }}
              </p>
              <span>{{ item.zhaiyao }}</span>
            </div>
          </div></van-pull-refresh
        ></van-tab
      >
    </van-tabs>
  </div>
</template>

<script>
import { getphoto, getimglist } from "../../apis/PhotoSharing";
export default {
  data() {
    return {
      isLoading: false,
      active: 0,
      //导航栏
      lmgList: [],
      //图列表
      cateList: [],
      categist: [],
      cateId: "",
    };
  },
  async mounted() {
    let res = await getphoto();
    console.log(res);
    this.lmgList = res.data.message;

    //图列表
    // let red = await getimglist(0);
    // console.log(red);
    // this.categist = red.data.message;
    this.init(0);
    // this.lmgList.splice(1)
  },
  methods: {
    //封装图标列
    init(id) {
      getimglist(id).then((red) => {
        this.categist = red.data.message;
      });
    },
    async lmglolo(id) {
      this.cateId = id;
      this.$router.push({ path: `/ImgDetial/${id}` });
    },
    lmglo(id) {
      console.log(id);
      this.cateId = id;
      this.$router.push({ path: `/ImgDetial/${id}` });
    },
    onRefresh() {
      setTimeout(() => {
        this.$toast("刷新成功");
        this.isLoading = false;
        this.init(0);
      }, 1000);
    },
  },
  watch: {
    //监听变化。更新图片列表
    async active() {
      console.log(this.active);
      //   let id = ;
      //   console.log(id);
      let red = await getimglist(
        this.active == 0 ? 0 : this.lmgList[this.active - 1].id
      );
      console.log(red);
      this.cateList = red.data.message;
      console.log(this.cateList);
    },
  },
};
</script>

<style lang="less" scoped>
.lmgList {
  margin-bottom: 50px;
  /deep/.van-tab__text {
    color: #26a2ff;
    font-size: 15px;
  }
  /deep/.van-nav-bar__title {
    color: rgb(255, 255, 255);
  }
  .header {
    /deep/ .van-nav-bar__title {
      color: #1989fa;
    }
  }

  /deep/ .van-nav-bar {
    background-color: #f7f7f7;
  }
  /deep/.van-tabs__line {
    background-color: #1989fa;
  }

  .conent {
    position: relative;
    height: 400px;
    // background-color: rgb(255, 255, 255);
    width: 100%;
    img {
      width: 100%;
      height: 400px;
    }
    .conent_1 {
      position: absolute;
      width: 100%;
      overflow: hidden;
      // color: white;
      background: rgba(0, 0, 0, 0.2) none repeat scroll !important;
      top: 332px;
      word-break: break-all;
      text-overflow: ellipsis;

      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      p {
        font-weight: bold;
        font-size: 17px;
        margin: 5px 0;
      }
      span {
        line-height: 20px;
      }
    }
  }
}
</style>